<template>
  <div>
    <div class="list-btn">
      用户姓名:<Input v-model.trim="params.realname" placeholder="请输入姓名" style="width: 200px" clearable @keyup.enter.native="getList(url)" />
    </div>
    <div class="list-btn">
      手机号:<Input v-model.trim="params.phone" placeholder="请输入手机号" style="width: 200px" clearable @keyup.enter.native="getList(url)" />
    </div>
    <div class="list-btn">
      订单号:<Input v-model.trim="params.nid" placeholder="请输入订单号" style="width: 200px" clearable @keyup.enter.native="getList(url)" />
    </div>
    <div class="list-btn">
      结清状态:
      <Select clearable style="width:200px" v-model="params.settleStatus" placeholder="全部">
        <Option value=" ">全部</Option>
        <Option :value=0>未结清</Option>
        <Option :value=1>已结清</Option>
      </Select>
    </div>
    <div class="list-btn">
      催收状态:
      <Select clearable style="width:200px" v-model="params.allotStatus" placeholder="全部">
        <Option value=" ">全部</Option>
        <Option :value=0>催收中</Option>
        <Option :value=1>催收已回收</Option>
      </Select>
    </div>
    <div class="list-btn">
      时间:<DatePicker type="date" @on-change="startTime"  placeholder="选择开始时间" style="width: 200px" ></DatePicker>
      ～<DatePicker type="date" @on-change="endTime"  placeholder="选择结束时间" style="width: 200px"  ></DatePicker>
    </div>

    <div class="list-btn">
      <Button type="primary" @click="getList(url,'refresh')">搜索</Button>
    </div>

    <div class="list-btn">
      <Button type="primary" @click="test(1)">逾期费用计算</Button>
    </div>
    <div class="list-btn">
      <Button type="primary" @click="test(2)">分配订单</Button>
    </div>
    <div class="list-btn">
      <Button type="primary" @click="test(3)">生成催收订单</Button>
    </div>
    <page-list :listTitle="listTitle" :list="list" :loading="loading" @selectItem="ids = $event;"></page-list>
    <page-button :total="total" @changePageNum="params.pageCurrent = $event; getList(url)" @changePageSize="params.pageLimit = $event; getList(url)"></page-button>
  </div>
</template>

<script>
  import listMixin from '../../mixin/list'
  import pageList from '../../template/listTemplate'
  import pageButton from '../../template/pageBtnTemplate'
  import confirmDialog from '../../template/confirmDialogTemplate'
  export default {
    mixins:[listMixin],
    components: {
      pageList,
      pageButton,
      confirmDialog
    },
    methods:{
      test(type){
        let url = '';
        if(type == 1){
          url = '/task/overdue/fee'
        }else if(type == 2){
          url = '/task/overdue/order'
        }else {
          url = '/task/overdue/create'
        }
        this.$post(url,{
          password : this.$md5('123456')
        }).then(res => {
          console.log(res,'cuishou');
        })
      }
    },
    data () {
      return {
        tag: {
          'title': '催收列表',
          'path': '/work/urge/list'
        },
        sysUser:[],
        statusList:[
          {
            id: 0,
            name:'未分配'
          },
          {
            id: 1,
            name: '已分配'
          }
        ],
        listTitle: [
          {
            title: '订单号',
            minWidth: 200,
            key: 'nid',
            align:'left',
          },
          {
            title: '用户姓名',
            key: 'realname',
            minWidth:100,
            align:'center'
          },
          {
            title: '手机号',
            key: 'phone',
            minWidth:120,
            align:'center'
          },
          {
            title: '借款周期(天)',
            key: 'loanDay',
            minWidth:110,
            align:'center'
          },
          {
            title: '借款金额(元)',
            key: 'loanMoney',
            minWidth:110,
            align:'center',
            render: (h, params) => {
              return h('div', this.toYuan(params.row.loanMoney))
            }
          },
          {
            title: '应还金额(元)',
            key: 'deptNeedRepayment',
            minWidth:110,
            align:'center',
            render: (h, params) => {
              return h('div', this.toYuan(params.row.deptNeedRepayment))
            }
          },
          {
            title: '应还本金(元)',
            key: 'realMoney',
            minWidth:110,
            align:'center',
            render: (h, params) => {
              return h('div', this.toYuan(params.row.realMoney))
            }
          },
          {
            title: '逾期费用(元)',
            key: 'deptOverdueAmount',
            minWidth:110,
            align:'center',
            render: (h, params) => {
              return h('div', this.toYuan(params.row.deptOverdueAmount))
            }
          },
          {
            title: '逾期天数',
            key: 'deptDays',
            minWidth:110,
            align:'center'
          },
          {
            title: '已还金额(元)',
            key: 'deptRepaymentMoney',
            minWidth:110,
            align:'center',
            render: (h, params) => {
              return h('div', this.toYuan(params.row.deptRepaymentMoney))
            }
          },
          {
            title: '合同开始时间',
            key: 'borrowTime',
            minWidth:160,
            align:'center',
            render: (h, params) => {
              return h('div',this.getLocalTime(params.row.borrowTime))
            }
          },
          {
            title: '合同结束时间',
            key: 'repayTime',
            minWidth:160,
            align:'center',
            render: (h, params) => {
              return h('div',this.getLocalTime(params.row.repayTime))
            }
          },
          {
            title: '结清状态',
            key: 'settleStatus',
            minWidth:110,
            align:'center',
            render: (h, params) => {// 审核状态 0审核中，1通过，2拒绝 ，3电核
              let d = {};
              switch (params.row.settleStatus){
                case 0:
                  d.txt = '未结清';
                  d.color = '#f90';
                  break;
                case 1:
                  d.txt = '已结清';
                  d.color = '#19be6b';
                  break;

              }
              return h('div', {
                props: {},
                style:{
                  color:d.color
                }
              }, d.txt)
            },
          },
          {
            title: '催收状态',
            key: 'allotStatus',
            minWidth:140,
            align:'center',
            render: (h, params) => {// 审核状态 0审核中，1通过，2拒绝 ，3电核
              let d = {};
              switch (params.row.allotStatus){
                case 0:
                  d.txt = `${params.row.collectionUserName}:催收中`;
                  d.color = '#19be6b';
                  break;
                case 1:
                  d.txt = `${params.row.collectionUserName}:催收回收`;
                  d.color = '#f90';
                  break;

              }
              return h('div', {
                props: {},
                style:{
                  color:d.color
                }
              }, d.txt)
            },
          },
        ],
        url: '/bkcollection/list',
        nameListUrl: '',
        params: {
          //status:'',
          pageCurrent: 1,
          pageLimit: 10
        },

      }
    },

  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .list-btn{
    margin-bottom: 5px;
    margin-right: 5px;
    display: inline-block;
  }
  .refresh-btn{
    float: right;
  }

</style>
